<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
    <title>Examples • Walls</title>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
    <script src="../bundle.js"></script>
    <script src="//cdn.jsdelivr.net/gh/donmccurdy/aframe-physics-system@v3.2.0/dist/aframe-physics-system.min.js"></script>
  </head>
  <body>
    <a-scene physics renderer="gammaOutput: true">
      <!-- Player -->
      <a-entity id="rig" movement-controls kinematic-body rotation="0 -90 0">
        <a-entity id="camera"
                  camera
                  position="0 1.6 0"
                  look-controls="pointerLockEnabled: true"></a-entity>
      </a-entity>

      <!-- Ground -->
      <a-grid static-body></a-grid>

      <!-- Obstacles -->
      <a-box color="#39BB82"
             width="15" height="5" depth="3"
             position="8 2.5 -5"
             static-body></a-box>
      <a-box color="#39BB82"
             width="15" height="5" depth="3"
             position="8 2.5 5"
             static-body></a-box>

      <!-- Lighting -->
      <a-light type="ambient" color="#bbb"></a-light>
      <a-light color="#ccc" position="0 30 0" distance="100" intensity="0.4" type="point"></a-light>
      <a-light color="#ccc" position="3 10 -10" distance="50" intensity="0.4" type="point"></a-light>
    </a-scene>
  </body>
</html>
